<template>
  <div class="Order">
    <ul class="header__tab">
      <li class="header__tab__item" :class="{'header__tab__item__active': search.type == 'all0'}" @click="setSearchType('all0')">全部</li>
      <li class="header__tab__item" :class="{'header__tab__item__active': search.type == 'all1'}" @click="setSearchType('all1')">未付款</li>
      <li class="header__tab__item" :class="{'header__tab__item__active': search.type == 'all2'}" @click="setSearchType('all2')">已付款</li>
      <li class="header__tab__item" :class="{'header__tab__item__active': search.type == 'all3'}" @click="setSearchType('all3')">已送达</li>
      <li class="header__tab__item" :class="{'header__tab__item__active': search.type == 'all4'}" @click="setSearchType('all4')">已发货</li>
      <li class="header__tab__item" :class="{'header__tab__item__active': search.type == 'all5'}" @click="setSearchType('all5')">退换</li>
    </ul>
    <div class="Order__contnet">
      <div class="Order__search">
        <div class="Order__search__right">
          <!-- <el-button>搜索</el-button> -->
          <button class="Ecp-button-primary">搜索</button>
        </div>
        <div class="Order__search__left">
          <div class="Order__search__group">
            <span class="Order__search__name">商品名称</span>
            <input class="Order__search__input" placeholder="请输入商品名称"/>
          </div>
          <div class="Order__search__group">
            <span class="Order__search__name">客户名称</span>
            <input class="Order__search__input" placeholder="请输入商品名称"/>
          </div>
          <div class="Order__search__group">
            <span class="Order__search__name">价格</span>
            <input class="Order__search__input" placeholder="请输入商品名称"/>
          </div>
           <div class="Order__search__group">
            <span class="Order__search__name">商品名称</span>
            <input class="Order__search__input" placeholder="请输入商品名称"/>
          </div>
        </div>
      </div>
      <div class="Order__routes">
        <span class="Order__route">线路1:999件/9家</span>
        <span class="Order__route">线路2:999件/9家</span>
        <span class="Order__route">线路3:999件/9家</span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        search: {
          type: 'all0'
        }
      }
    },
    methods: {
      setSearchType (type) {
        this.search.type = type
      }
    }
  }
</script>

<style lang="scss" scoped>
.Order {
  min-height: 100vh;
  background-color: #f3f3f3;
  &__route {
    margin-right: 35px;
  }
  &__routes {
    padding: 15px 0 15px 65px;
    line-height: 28px;
    position: relative;
    &:before {
      content: "";
      display: block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: #333856;
      position: absolute;
      top: 26px;
      left: 29px;
    }
  }
  &__search {
    padding: 10px 10px 0;
    overflow: hidden;
    border-bottom: 1px solid #bdbdbd;
    &__group {
      height: 28px;
      line-height: 28px;
      display: inline-block;
      margin-bottom: 10px;
      margin-right: 28px;
    }
    &__name {
      vertical-align: middle;
      margin-right: 15px;
    }
    &__input {
      height: 25px;
      background-color: #f0f5fb;
      border-radius: 9px;
      vertical-align: middle;
      border: none;
      padding: 0 10px;
      text-align: center;
      font-size: 13px;
      &:focus {
        outline: none;
      }
    }
    &__left {
      margin-right: 108px;
      padding: 5px 0 5px 55px;
      position: relative;
      &:before {
        content: "";
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #333856;
        position: absolute;
        top: 16px;
        left: 19px;
      }
    }
    &__right {
      float: right;
      width: 108px;
      margin-top: 23px;
    }
  }
  &__contnet {
    margin: 20px 30px;
    background-color: #fff;
  }
}
</style>
